<template>
  <div class="clearfix selector">
    <div class="type-wrap logo">
      <div class="fl key brand">品牌</div>
      <div class="value logos">
        <ul class="logo-list">
          <li v-for="(trade,index) in trademarkList" :key="trade.tmId" @click="tradeMarkHandle(trade)">{{ trade.tmName }}</li>
        </ul>
      </div>
    </div>
    <div class="type-wrap" v-for="(attr,index) in attrsList" :key="attr.attrId">
      <div class="fl key">{{ attr.attrName }}</div>
      <div class="fl value">
        <ul class="type-list">
          <li v-for="(attrValue,index) in attr.attrValueList" :key="index">
            <a @click="attributeHandle(attr,attrValue)">{{ attrValue }}</a>
          </li>
        </ul>
      </div>
      <div class="fl ext"></div>
    </div>
  </div>
</template>

<script>
import {mapGetters} from "vuex";

export default {
  name: 'SearchSelector',
  methods: {
    /* 点击某个品牌的回调函数 */
    tradeMarkHandle(trade) {
      // 整理父组件需要的参数格式为："ID:品牌名称" 示例: "1:苹果"
      const trademark = `${trade.tmId}:${trade.tmName}`
      // 触发自定义事件,将trademark传递给父组件，让父组件带着此参数去发送请求
      this.$emit("getTrademark", trademark)
    },
    /* 点击某个属性值的回调函数 */
    attributeHandle(attr, attrValue) {
      // 整理父组件需要的参数格式为：["属性ID:属性值:属性名"] 示例:["2 : 6.0～6.24英寸 : 屏幕尺寸"]
      const attribute = `${attr.attrId}:${attrValue}:${attr.attrName}`
      // 触发自定义事件,将attribute传递给父组件，父组件将attribute追加到数组中带着参数去发送请求
      this.$emit("getAttribute", attribute)
    }
  },
  computed: {
    /* 使用mapGetters将searchStore模块下的getters映射为组件实例的属性 */
    ...mapGetters("searchStore", ["trademarkList", "attrsList"])
  },
}
</script>

<style lang="less" scoped>
.selector {
  border: 1px solid #ddd;
  margin-bottom: 5px;
  overflow: hidden;

  .logo {
    border-top: 0;
    margin: 0;
    position: relative;
    overflow: hidden;

    .key {
      padding-bottom: 87px !important;
    }
  }

  .type-wrap {
    margin: 0;
    position: relative;
    border-top: 1px solid #ddd;
    overflow: hidden;

    .key {
      width: 100px;
      background: #f1f1f1;
      line-height: 26px;
      text-align: right;
      padding: 10px 10px 0 15px;
      float: left;
    }

    .value {
      overflow: hidden;
      padding: 10px 0 0 15px;
      color: #333;
      margin-left: 120px;
      padding-right: 90px;

      .logo-list {
        li {
          float: left;
          border: 1px solid #e4e4e4;
          border-radius: 10px;
          margin: 2px 2px 0 0;
          width: 105px;
          height: 32px;
          text-align: center;
          line-height: 32px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-weight: 700;
          color: #fff;
          background-color: #e1251b;
          font-size: 14px;
          cursor: pointer;
          transition: all .5s linear;

          &:hover {
            border: 1px solid #367af5;
          }
        }
      }

      .type-list {
        li {
          float: left;
          display: block;
          margin-right: 30px;
          line-height: 26px;

          a {
            text-decoration: none;
            color: #666;

            &:hover {
              color: #e1251b;
            }
          }
        }
      }
    }

    .ext {
      position: absolute;
      top: 10px;
      right: 10px;

      .sui-btn {
        display: inline-block;
        padding: 2px 14px;
        box-sizing: border-box;
        margin-bottom: 0;
        font-size: 12px;
        line-height: 18px;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        padding: 0 10px;
        background: #fff;
        border: 1px solid #d5d5d5;
      }

      a {
        color: #666;
      }
    }
  }
}
</style>
